<template>
    <section style="margin-top: 20px; background:#fff;">
        <div class="table-page-search-wrapper">
            <a-form layout="inline"
                    @keyup.enter.native="searchQuery">
                <a-row :gutter="24">

                    <a-col :md="6"
                           :sm="8">
                        <a-form-item label="搜索日志">
                            <a-input placeholder="请输入搜索关键词"
                                     v-model="queryParam.keyWord"></a-input>
                        </a-form-item>
                    </a-col>

                    <a-col :md="6"
                           :sm="10">
                        <a-form-item label="创建时间"
                                     :labelCol="labelCol"
                                     :wrapperCol="wrapperCol">
                            <a-range-picker style="width: 210px"
                                            v-model="queryParam.createTimeRange"
                                            format="YYYY-MM-DD"
                                            :placeholder="['开始时间', '结束时间']"
                                            @change="onDateChange"
                                            @ok="onDateOk" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="5"
                           :sm="8"
                           v-if="tabKey === '2'">
                        <a-form-item label="操作类型"
                                     style="left: 10px">
                            <j-dict-select-tag v-model="queryParam.operateType"
                                               placeholder="请选择操作类型"
                                               dictCode="operate_type" />
                        </a-form-item>
                    </a-col>
                    <span style="float: left;overflow: hidden;"
                          class="table-page-search-submitButtons">
                        <a-col :md="6"
                               :sm="24">
                            <a-button type="primary"
                                      style="left: 10px"
                                      @click="searchQuery"
                                      icon="search">查询</a-button>
                            <a-button type="primary"
                                      @click="searchReset"
                                      icon="reload"
                                      style="margin-left: 8px;left: 10px">重置</a-button>
                        </a-col>
                    </span>

                </a-row>
            </a-form>
            <!-- table区域-begin -->
            <div>
                <a-table ref="table"
                         bordered
                         size="middle"
                         rowKey="id"
                         :columns="columns"
                         :dataSource="tbList"
                         :pagination="ipagination"
                         :loading="loading"
                         @change="handleTableChange">
                    <span slot="action"
                          slot-scope="text, record">
                        <a @click="handleEdit(record)">编辑</a>

                        <a-divider type="vertical" />
                        <a-popconfirm title="确定删除吗?"
                                      @confirm="() => handleDelete(record.id)">
                            <a>删除</a>
                        </a-popconfirm>
                    </span>
                </a-table>
            </div>
            <!-- table区域-end -->
        </div>
    </section>
</template>

<script>
import { sysOperationLogS } from '@/api/api'
import { isEmpty } from '@/util/util'
const columns = [
    {
        title: '名称',
        dataIndex: 'content',
        align: 'center',
        ellipsis: true,
    }, {
        title: 'ip',
        dataIndex: 'ip',
        align: 'center',
    },
    {
        title: '操作类型',
        dataIndex: 'operateType',
        align: 'center',
        customRender(text) {
            if (text == 1) {
                return '查询';
            } else if (text == 2) {
                return '添加';
            } else if (text == 3) {
                return '修改';
            } else if (text == 4) {
                return '删除'
            }
        },
        width: 90
    },
    {
        title: '请求地址',
        dataIndex: 'requestUrl',
        align: 'center',
        ellipsis: true,
    },
    {
        title: '操作人',
        dataIndex: 'username',
        align: 'center',
        ellipsis: true,
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'edit',
        scopedSlots: { customRender: 'action' },
        align: 'center',
        width: 130
    }
];
export default {
    data() {
        return {
            selectedRowKeys: [],
            loading: false,
            tbList: [],
            columns,
            /* 分页参数 */
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            // 查询条件
            queryParam: {
                ipInfo: '',
                createTimeRange: [],
                logType: '1',
                keyWord: '',
            },
            tabKey: "1",
            labelCol: {
                xs: { span: 1 },
                sm: { span: 2 },
            },
            wrapperCol: {
                xs: { span: 10 },
                sm: { span: 16 },
            },
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData(arg) {
            if (arg === 1) {
                this.ipagination.current = 1;
            }
            this.loading = true;
            let pageNo = this.ipagination.current;
            let pageSize = this.ipagination.pageSize;
            let keyword = isEmpty(this.queryParam.keyword);
            sysOperationLogS(pageNo, pageSize, keyword).then(res => {
                if (res.code === 200) {
                    this.loading = false;
                    this.ipagination.total = res.data.total ? res.data.total : 0;
                    this.tbList = res.data.records;
                }
            })
        },
        onDateChange: function (value, dateString) {
            console.log(dateString[0], dateString[1]);
            this.queryParam.createTime_begin = dateString[0];
            this.queryParam.createTime_end = dateString[1];
        },
        onDateOk(value) {
            console.log(value);
        },
        searchQuery() { },
        searchReset() { },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        handleTableChange(pagination, filters, sorter) {
            this.ipagination = pagination;
            this.getData();
        },
    },

}
</script>
<style>
</style>